import React, {Component} from "react";
import { Layout } from 'antd';
import { Route, Switch, HashRouter, Redirect} from 'react-router-dom'

import './index.less'

import Meum from '../../components/layout/menu/index' // 菜单组件
import HeaderTitle from '../../components/layout/header/index' // 头部组件


const { Header, Content, Sider } = Layout;

class Home extends Component {
  state = {
    collapsed: false
  }

  // 菜单折贴
  toggleCollapsed =  () => {
    const collapsed = !this.state.collapsed
    this.setState({collapsed})
  }

  render() {
    const { collapsed } = this.state
    return (
      <div style={{height: '100vh'}}>
      <Layout className="home_container" style={{height: '100%'}}>
      <Header className="header">
      <HeaderTitle collapsed={collapsed} toggleCollapsed={this.toggleCollapsed} ></HeaderTitle>
      </Header>
      <Layout>
        <Sider width={210} className="site-layout-background"
         collapsed={this.state.collapsed}
         collapsible
         theme="light"
        >
          <Meum></Meum>
        </Sider>
        <Layout style={{ padding: '6px', height: '100%' }}>
          <Content
            className="site-layout-background"
            style={{
              padding: 12,
              width: '1180px',
              margin: '0 auto'
            }}
          >
            <HashRouter>
              <Switch>
              {this.props.childrenRoute.map((item, index) => {
                return <Route path={item.path} component={item.component} key={index}></Route>
              })}
              <Redirect to="/home/user"></Redirect>
              </Switch>
            </HashRouter>
          </Content>
        </Layout>
      </Layout>
    </Layout>
    </div>
    )
  }
}

export default Home;